<template>
    <div class="content">
        <div class="index-header-box" id="head">
            <div class="index-header">
                <div @click="$router.back(-1)" class="back">
                    <van-icon name="arrow-left"/>
                </div>
                <div class="title">我收藏的文章</div>
            </div>
        </div>

        <van-row class="page-block">

            <div class="list-cell no-border">
                <div v-for="item in articles" :id="'m'+item.article_id">
                    <div class="media-msg-list">
                        <van-swipe-cell>
                            <router-link :to="{name:'msgDetail',query:{id:item.article_id}}">
                                <van-image fit="cover" class="media-list-logo pull-left" lazy-load :src="img(item.article.thumb)">
                                    <template v-slot:loading>
                                        <van-loading type="spinner" size="20"/>
                                    </template>
                                </van-image>
                            </router-link>

                            <div class="media-list-body pull-left">
                                <div class="media-list-text-top">{{item.article.title}}</div>
                                <div class="media-list-text-tps">
                                    <span class="pull-left">发布者：{{item.article.author}}</span>
                                    <span class="pull-right">{{stampToDate(item.article.publish_time)}}</span>
                                </div>
                                <ul class="pull-right msg-num">
                                    <li class="item good">{{item.article.good_numb||0}}</li>
                                    <li class="item star">{{item.collectCount||0}}</li>
                                    <li class="item book">{{item.msgCount||0}}</li>
                                </ul>
                            </div>
                            <template slot="right">
                                <van-button class="list-btn del" text="删除" @click="delArt(item.id)"/>
                            </template>
                        </van-swipe-cell>
                    </div>
                </div>
            </div>
        </van-row>

        <infinite-loading :on-infinite="onLoad" ref="infiniteLoading">
            <div slot="no-results" class="no-more">没有更多了～</div>
            <div slot="no-more" class="no-more">没有更多了～</div>
        </infinite-loading>
    </div>
</template>

<script>
    import InfiniteLoading from 'vue-infinite-loading';

    export default {
        name: "user_collect",
        components: {
            InfiniteLoading
        },
        data() {
            return {
                articles: [],
                page: 1,
            }
        },
        computed: {

        },
        mounted: function () {
        },
        methods: {
            onLoad($state) {
                let that = this;
                this.$api.member.getCollectArt(that.page).then(res => {
                    res=res.data;

                    if (res.data.data.length>0) {
                        this.articles.push(...res.data.data);
                        that.page++;
                        $state.loaded();
                    } else {
                        $state.complete();
                    }
                });
            },

            //删除收藏文章
            delArt(id) {
                this.$dialog.confirm({
                    message: "是否删除此收藏文章？"
                }).then(() => {
                    this.$api.member.delArticle(id).then(res => {
                        if (res.data.status === 1) {
                            $("#m"+id).remove();
                        } else {
                            this.$dialog.alert({
                                message: res.data.msg
                            }).then();
                        }


                    });

                });

            },

        },
    }
</script>

<style lang="scss" scoped>
    @import "../../assets/scss/user.scss";
</style>
